<html>

<head>
    <meta charset="utf-8" />
    <title>夏伯渝之行程</title>
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport" />

    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
        <style type="text/css">
            body,
            html,
            #container {
                height: 100%;
                margin: 0px;
            }

            body {
                position: relative;
            }

            .amap-marker-label {
                font-size: 13px;
                border: 1px solid orange;
                background: #fff;
                border-radius: 5px;
                color: #690441;
            }

            #ctrlBox {
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 99999;
                line-height: 200%;
                font-size: 13px;
                background: rgba(0, 0, 0, 0.7);
                color: #FFEB3B;
                padding: 2px;
                border-radius: 100px;
            }

            #ctrlBox img {
                width: 50px;
                height: 50px;
                border-radius: 100px;
            }

            #btn_comtent {
                position: absolute;
                top: 5px;
                right: 10px;
                width: 55px;
                height: 60px;
            }

            #btn_text {
                background: rgba(0, 0, 0, 0.7);
                color: #f1efe2;
                text-align: center;
                border-radius: 12px;
            }

            .amap-ui-smp-ifwn-content-body {
                border-radius: 8px !important;
            }

            .window_body {
                color: #666;
                list-style: none;
                font-size: 1rem;
                padding: 0.3rem 1.3rem 0.3rem 1rem;
                margin: 0px;
            }

            .amap-ui-smp-ifwn-info-title {
                border: 0px !important;
            }
        </style>
    </head>

    <body>

        <div id="container" tabindex="0"></div>

        <div id="ctrlBox">
            <img src="./img/1.jpg">
        </div>
        <div id='btn_comtent'>
            <p id="btn_text">实时</p>
            <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox" checked="checked">
            </div>
        </div>

        <!-- <button>轨迹</button> -->


    </body>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/data.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=f1edd598183c970e84c7c513c49ab036"></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

    <script type="text/javascript">
        var map = null;
        var marker = null;
        var SimpleInfoWindow = null;
        var Polyline = null;
        var T=null;

        AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {

            SimpleInfoWindow = new SimpleInfoWindow({
                infoTitle: '',
                infoBody: '<ul class=window_body>' +
                    '<li>通信时间:<span><%- updatedTime %><span></li>' +
                    '<li>定位时间:<span><%- locationTime %><span></li>' +
                    '<li>东经:<span><%- longitude %><span></li>' +
                    '<li>北纬:<span><%- latitude %><span></li>' +
                    '</ul>',
                infoTplData: { //模板数据
                    longitude: '',
                    latitude: '',
                    locationTime: '',
                    updatedTime: ''
                },
                offset: new AMap.Pixel(15, -31) //基点指向marker的头部位置
            });

            function markerClick(e) {
                SimpleInfoWindow.setInfoTplData({
                    longitude: formatDegree(marker.getExtData().longitude),
                    latitude: formatDegree(marker.getExtData().latitude),
                    locationTime: marker.getExtData().locationTime,
                    updatedTime: marker.getExtData().updatedTime,
                })
                SimpleInfoWindow.open(map, e.target.getPosition());
            }
            function latestLocal() {
                $.ajax({
                    url: 'http://bdwise.com:30/jdcjk/getTerminalsByUserAccount.do?account=18718653506&password=e10adc3949ba59abbe56e057f20f883e',
                    method: "get",
                    success: function (res) {
                        //console.log([res.result[0].longitude, res.result[0].latitude]);
                        if (res.status == 'OK') {
                            if (marker) {
                                marker.moveTo([res.result[0].longitude, res.result[0].latitude], 1);
                                marker.setExtData({
                                    locationTime: res.result[0].longitude,
                                    updatedTime: res.result[0].latitude,
                                    longitude: res.result[0].longitude,
                                    latitude: res.result[0].latitude
                                });
                            } else {
                                marker = new AMap.Marker({
                                    map: map,
                                    position: [res.result[0].longitude, res.result[0].latitude],
                                    extData: {
                                        locationTime: res.result[0].locationTime,
                                        updatedTime: res.result[0].updatedTime,
                                        longitude: res.result[0].longitude,
                                        latitude: res.result[0].latitude
                                    },
                                    icon: new AMap.Icon({
                                        size: new AMap.Size(40, 50),  //图标大小
                                        image: "./img/local.png",
                                    })
                                }).on('click', markerClick);
                            }
                        }
                    }
                });
            }
             //初始化地图
             function init() {
                let googleWX = new AMap.TileLayer({
                    tileUrl: 'https://mt{1,2,3,0}.google.cn/maps/vt?lyrs=s@194&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]'//图块取图地址
                });
                map = new AMap.Map('container', {
                    pitch: 75,
                    // viewMode:'3D',
                    zoom: 17,
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [85.3223056, 27.6932778],
                    layers: [
                        googleWX
                    ],
                });

                $('.weui-cell__ft').on('change','.weui-switch',function () {
                    //console.log($(".weui-switch").prop( "checked"));
                    if($(".weui-switch").prop( "checked")){
                                latestLocal()
                                Polyline.hide()
                                $('#btn_text').text('实时');
                    }else{
                                queryLocationReplay()
                                $('#btn_text').text('轨迹');
                    }
                });
        }
          //获取距至今10个小时的轨迹
          function queryLocationReplay(){
            $.ajax({
                    url: 'http://bdwise.com:30/jdcjk/queryLocationReplay.do',
                    method: "get",
                    data:{
                        terminalID:'1535',
                        startTime:timestampToTime(),
                        endTime:getCurrentTime(),
                    },
                    success: function (res) {
                        //console.log(res);
                    },
                    error:function(res){
                        //console.log(Arr);
                        let path=[];
                        for(let i in Arr.result){
                              path.push([Arr.result[i].longitude,Arr.result[i].latitude]);      
                        }             
                        make_Polyline(path)                    
                    }
                }); 
          }

          function make_Polyline(path){
              path.reverse();
              if(Polyline){
                Polyline.setPath(path);
                Polyline.show()
              }else{
                        Polyline=new AMap.Polyline({
                        path:path,          //设置线覆盖物路径
                        isOutline:true,
                        strokeColor: '#3366cc', //线颜色
                        strokeOpacity: 1,       //线透明度
                        strokeWeight: 5,        //线宽
                        strokeStyle: "solid",   //线样式
                        lineJoin:'round',
                        showDir:true,//是否延路径显示白色方向箭头
                        strokeDasharray: [10, 5] //补充线样式
                    });
                    Polyline.setMap(map);
              }
          }

            //将度转换成为度分秒
            function formatDegree(value) {
                value = Math.abs(value);
                var v1 = Math.floor(value); //度
                var v2 = Math.floor((value - v1) * 60); //分
                var v3 = Math.round((value - v1) * 3600 % 60); //秒
                return v1 + '°' + v2 + '\'' + v3 + '"';
            }
            //日期:前10个小时
            function timestampToTime() {
                let current_date =new Date();
                let  date = new Date(current_date.getTime()-1000*60*60*10);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                Y = date.getFullYear() + '-';
                M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                D = date.getDate() + ' ';
                h = date.getHours() + ':';
                m = date.getMinutes() + ':';
                s = date.getSeconds();
                return Y+M+D+h+m+s;
          }
            // 用双位数 01 ~09
            function toDou(num) {
                var num = num + "";
                return num.length > 1 ? num : 0 + num;
            }
            // 获取当前时间 T='2018-01-10 11:32:53'
            function getCurrentTime(){
                    var date = new Date()
                    var year = date.getFullYear();
                    var month = toDou(date.getMonth() + 1) ;
                    var day = toDou(date.getDate()) ;
                    var hour = toDou(date.getHours()) ;
                    var minute = toDou(date.getMinutes()) ;
                    var seconds = toDou(date.getSeconds()) ;
                    var time = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds;
                    return time;
            }        

            init();
            latestLocal();
            T=setInterval(function () {
                    latestLocal();
            }, 10000)
        })


       


    </script>

</html>